<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-20 19:27:43
 * @Description  : 用户添加或者修改面板
-->

<template>
  <div class="bg-lightColor user-edit-con p-3 text-[13px]">
    <n-grid x-gap="12" :cols="1" class="mb-2">
      <n-gi>
        <n-button
          type="primary"
          size="small"
          class="!text-[13px]"
          @click="backView"
        >
          <div class="mr-2 rotate-90 transform">
            <SvgIcon icon="xiala" color="#fff" size="10px"></SvgIcon>
          </div>
          返回
        </n-button>
      </n-gi>
    </n-grid>
    <n-divider class="!my-2" />
    <n-form
      ref="userFormRef"
      :label-width="isSmall ? 100 : 120"
      label-placement="left"
      :label-align="isSmall ? 'left' : 'right'"
      :model="user"
      size="small"
      require-mark-placement="right"
      :rules="formRule"
    >
      <n-form-item label="用户名" path="username">
        <n-input
          v-model:value="user.username"
          placeholder="请输入用户名："
          :allow-input="noSideSpace"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>
      <n-form-item label="头像" path="avator">
        <UploadPanel
          v-if="!isModify || (isInit && isModify)"
          :file-list="previewFileList"
          @file-change="handlePicChange"
        ></UploadPanel>
      </n-form-item>
      <n-form-item label="昵称" path="nickname">
        <n-input
          v-model:value="user.nickname"
          placeholder="请输入昵称："
          :allow-input="noSideSpace"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>
      <n-form-item label="性别：" path="sex">
        <n-radio-group v-model:value="user.sex" name="radiobuttongroup2">
          <n-radio-button :value="0" label="男" />
          <n-radio-button :value="1" label="女" />
        </n-radio-group>
      </n-form-item>

      <n-form-item label="手机号" path="phone">
        <n-input
          v-model:value="user.phone"
          placeholder="请输入手机号："
          :allow-input="noSideSpace"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>

      <n-form-item label="邮箱" path="email">
        <n-input
          v-model:value="user.email"
          placeholder="请输入邮箱："
          :allow-input="noSideSpace"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>

      <n-form-item label="所属角色：" path="pid">
        <n-select
          v-model:value="user.roleId"
          :options="userList"
          class="!w-[300px]"
        />
      </n-form-item>

      <n-form-item label=" " v-permission="['admin']">
        <n-button
          type="primary"
          class="grent-btn w-[120px]"
          @click="handleSave(false)"
        >
          保存
        </n-button>
        <n-button
          v-if="!isModify"
          type="primary"
          class="grent-btn w-[120px] ml-2"
          @click="handleSave(true)"
        >
          保存并新增
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInst, UploadFileInfo } from 'naive-ui'
import type { UserNotDepRes, UserUpdateReq } from '@/types/user'
import { userMenuShow } from '@/hooks/useMenuShow'
import { noSideSpace } from '@/utils'
import UploadPanel from '@/views/User/Explorer/components/UploadPanel.vue'
const { isSmall } = userMenuShow()

const props = defineProps<{
  isModify: boolean
  userRes?: UserNotDepRes
}>()

const emits = defineEmits<{
  (e: 'backView'): void
  (e: 'changeUser', type: number, data: UserUpdateReq, addNew: boolean): void
}>()
const backView = () => {
  emits('backView')
}

const previewFileList = ref<UploadFileInfo[]>([])
const handlePicChange = (fileList: UploadFileInfo[]) => {
  if (fileList.length) {
    user.avator = fileList[0].url as string
  }
}

const user = reactive<UserUpdateReq>({
  userId: '',
  username: '',
  nickname: '',
  password: '',
  sex: 0,
  phone: '',
  email: '',
  roleId: ''
})

const userList = ref([
  {
    label: '用户',
    value: '0'
  },
  {
    label: '管理员',
    value: '1'
  }
])

const isInit = ref(false)
const initUser = () => {
  if (props.isModify) {
    const { username, nickname, email, phone, id } =
      props.userRes as UserNotDepRes
    user.userId = id
    user.username = username
    user.nickname = nickname
    user.email = email
    user.phone = phone
    previewFileList.value = [
      {
        id: '1',
        status: 'finished',
        percentage: 100,
        url: user.avator,
        name: user.nickname
      }
    ]
    isInit.value = true
  }
}

onMounted(() => {
  initUser()
})

const formRule = {
  examId: [
    {
      required: true,
      message: '请选择科目ID',
      trigger: ['blur']
    }
  ]
}

const userFormRef = ref<FormInst | null>(null)

const handleSave = (addNew = false) => {
  userFormRef.value?.validate((error: any) => {
    if (error) {
      return
    }

    if (props.isModify) {
      emits('changeUser', 1, user, addNew)
    } else {
      emits('changeUser', 0, user, addNew)
    }

    if (addNew) {
      user.username = ''
      user.nickname = ''
      user.email = ''
      user.phone = ''
      previewFileList.value = []
      user.avator = ''
    }
  })
}
</script>

<style scoped lang="scss"></style>
